module Cms
  class ContextMenu < Widget

    attr_accessor :on_create
    
    def initialize(*args)
      super(*args)
      #self.class = "context_menu"

      left = add Stone.new("red", "delete").style("position:absolute; left:-6em; top:-2.5em")
      left.className << ' left'
      right = add Stone.new("green", "create").style("position:absolute; left:1em; top:-2.5em")
      right.className << ' right'
      up = add Stone.new("orange", "copy").style("position:absolute; left:-2.5em; top:-6em")
      up.className << ' up'
      down = add Stone.new("blue", "cancel").style("position:absolute; left:-2.5em; top:1em")
      down.className << ' down'
      self.style = "display:none; width:12em; height:12em; background-color:transparent;border:none;"
    end
    
    
    def render
      context.page.link_css file_url('menu.css')
      context.page.head.e :script, "jQuery(function($) { $('##{parent.id}').mousedown(function(ev) {
          //console.log(ev);

          if (ev.which == 3) {
            this.menu = $(this).children('.ContextMenu')[0];
            this.menu.style.display = 'block';
            this.menu.style.position = 'absolute';
            this.menu.style.top = ev.clientY+'px';
            this.menu.style.left = ev.clientX+'px';
            var directions = ['left', 'right', 'up', 'down'];
            for (var d in directions) {
              $(this.menu).removeClass('chosen_'+directions[d]);
            }
          }
        }).rightMouseUp(function(ev) {
          console.log(this);
          var menu = $(this).children('.ContextMenu')[0];
          console.log(menu.lastWay);
          menu.style.display = 'none';
          if (menu.lastWay != null) {
            this.menu_showing = false;
            var callbacks = {right:'/#{on_create}'}
            jQuery.getScript( callbacks[menu.lastWay])
            menu.lastWay = null;
            return false;
          }
          return true;
        }).mousemove(function(ev) {
          if (this.menu && this.menu.style.display != 'none') {
            if (typeof(this.menu) == 'undefined') {
              return;
            }
            var delta = { top : this.menu.offsetTop - ev.clientY, left : this.menu.offsetLeft - ev.clientX }
            var dist = { top : Math.abs(delta.top), left : Math.abs(delta.left) }
            this.lastTimeStamp = ev.timeStamp;
            this.lastDelta = delta;

            var way = null;// this.menu.lastWay;

            if (dist.top > dist.left) {
              if (delta.top > 0) {
                way = 'up';
              } else {
                way = 'down';
              }
            } else {
              if (delta.left > 0) {
                way = 'left';
              } else {
                way = 'right';
              }              
            }

            var directions = ['left', 'right', 'up', 'down'];
            for (var d in directions) {
              if (directions[d] != way) {
                 $(this.menu).removeClass('chosen_'+directions[d]);
              }
            }

            if (Math.sqrt((dist.top+1)*(dist.top+1) + (dist.left+1)*(dist.left+1)) < 20) {
              $(this.menu).removeClass('chosen_'+way);
              return;
            }

            if (this.menu.lastWay != way) {
              $(this.menu).addClass('chosen_'+way);
              this.menu.lastWay = way;
              this.lastWay = way;
            }
          }
        })

        //$('body').mousemove(function(ev) { body.__target = ev.target; })
      })
      "      
      super()      
    end


    
  end
end